<script>
import { h } from 'vue'
import {
    domTreeMap,
    globalDomTree,
    useDesignStore
} from '../../../../stores/design'

export default {
    data() {
        return {
            designStore: useDesignStore()
        }
    },
    methods: {
        rerender() {
            const { key } = globalDomTree.attr
            globalDomTree.attr.key = !key
            this.$forceUpdate()
        },
        renderChildren(node) {
            if (node === null) {
                return ''
            }
            return node.children.map((item) => {
                if (typeof item === 'string') {
                    return item
                }
                return h(item.tag, item.attr, this.renderChildren(item))
            })
        }
    },
    computed: {
        trigger() {
            return this.designStore.trigger.canvas
        },
        attr() {
            return this.designStore.currentDomPointer.attr
        }
    },
    render() {
        return h(
            globalDomTree.tag,
            globalDomTree.attr,
            this.renderChildren(globalDomTree)
        )
    },
    created() {
        globalDomTree.attr.onClick = this.designStore.focusOnDom
        domTreeMap['canvas'] = globalDomTree
        // this.attr.class 有时候是 object，有时候是 string
        if (typeof this.attr.class === 'string') {
            this.attr.class = this.attr.class.replace('highlighted', '')
            this.designStore.currentDomPointer = domTreeMap['canvas']
            this.attr.class += ' highlighted'
        } else {
            this.attr.class['highlighted'] = false
            this.designStore.currentDomPointer = domTreeMap['canvas']
            this.attr.class['highlighted'] = true
        }
    },
    watch: {
        trigger() {
            this.rerender()
        }
    }
}
</script>

<style>
/* 点击时的样式 */
.highlighted {
    box-shadow: 0px 0px 10px 0px #f80000 !important;
    /* border: 3px solid black !important; */
}

.web-page {
    width: 90%;
    height: 540px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 20px;
    position: relative;
    text-align: center;
    overflow: auto;
    box-shadow: 0 0 0.5em 0 #000000;
}
</style>
